<template>
  <div>
    <h3>自动出款条件设置</h3>
    <el-form :inline="true" :model="filters" ref="ruleForm" class="demo-form-inline">
      <el-form-item label="条件名">
        <el-input v-model="filters.conditionName" placeholder="请输入条件名" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="层级" prop="userLevel">
        <el-select :collapse-tags="true" v-model="filters.userLevel" multiple placeholder="请选择层级" class="with-pre-userLevel">
          <el-option label="代理"
                     :key="-1"
                     :value="-1">
          </el-option>
          <el-option
            v-for="item in levelList"
            :label="item.name"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" v-if="roleCheck('withdraw-auto-add')" @click="openDialog({dialogName: staticDialogName})">添加</el-button>
      <el-button @click="cancel()">重置</el-button>
    </el-form>
    <el-table
      border
      :data="tableData" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="条件名称" prop="conditionName" align="center"></el-table-column>
      <el-table-column label="层级设置" align="center">
        <template slot-scope="{row}">
          <span
            style="color: #409eff;cursor: pointer"
            @click="openDialog({props:row,dialogName:staticDialogName1})"
            type="text">{{row.levelName}}  {{row.levelId.split(',').length > 3 ? '等'+row.levelId.split(',').length+'个层级': ''}}
          </span>
          <!--需要权限控制-->
          <!--<span v-else>{{row.levelName}}  {{row.levelId.split(',').length > 3 ? '等'+row.levelId.split(',').length+'个层级': ''}}</span>-->
        </template>
      </el-table-column>
      <el-table-column label="金额区间设置" align="center">
        <template slot-scope="{row}">
          {{row.minAmount}}-{{row.maxAmount}}
        </template>
      </el-table-column>
      <el-table-column label="三方出款商户总数" prop="merchantCount" align="center">
        <template slot-scope="{row}">
          <el-button
            @click="openMerchantCountDialog(row.merchantId)"
            type="text">{{row.merchantId.split(',').length}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark">
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template slot-scope="{row}">
          <el-button type="text" v-if="roleCheck('withdraw-auto-del')" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" v-if="roleCheck('withdraw-auto-edit')" @click="openDialog({props:row,dialogName: staticDialogName2})">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-auto-conditions-dialog
      v-if="dialogName === staticDialogName"
      v-model="dialogVisible"
      @submit="submitFinished"/>
    <edit-auto-conditions-dialog
      v-if="dialogName === staticDialogName2"
      v-model="dialogVisible"
      :row-data="dialogProps"
      @submit="submitFinished"/>
    <level-view-dialog
      v-if="dialogName === staticDialogName1"
      v-model="dialogVisible"
      :row-level-id="dialogProps.levelId"
      @submit="submitFinished"/>
    <el-dialog :visible.sync="merchantCountDialog" :before-close="cancel2" >
      <template slot="title">三方出款商户总数</template>
      <el-table
        border
        :data="merchantView"
        v-loading="loading"
        element-loading-text="加载中..."
        class="el-table-align-center">
        <el-table-column label="三方出款商户" prop="channelName" align="center"></el-table-column>
        <el-table-column label="商户号" prop="merchantCode" align="center"></el-table-column>
        <el-table-column label="三方账户余额" align="center">
          <template slot-scope="{row}">
            {{row.amount}}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="merchantCountDialog = false">取 消</el-button>
        <el-button type="primary" @click="merchantCountDialog = false">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {form,factory,dialog,grid} from '@/build'
  import {withdrawAutoList,withdrawAutoDelete,merchantReview,accountBalance} from "@/services/api/withdraw";
  import {getUserLevelList} from "@/services/api/userLevel";
  import AddAutoConditionsDialog from "@/views/finance/withdraw/addAutoConditionsDialog";
  import EditAutoConditionsDialog from "@/views/finance/withdraw/editAutoConditionsDialog";
  import LevelViewDialog from "@/views/finance/withdraw/levelViewDialog";
  export default {
    name: "withdraw-configs",
    mixins: [form,factory,dialog,grid],
    components:{
      AddAutoConditionsDialog,
      EditAutoConditionsDialog,
      LevelViewDialog
    },
    data() {
      return {
        levelList:[],
        dialogVisible:false,
        staticDialogName:'add-auto-conditions-dialog',
        staticDialogName1:'level-view-dialog',
        staticDialogName2:'edit-auto-conditions-dialog',
        tableData:[],
        merchantView:[],
        filters: {
          size:20,
          page:1,
          conditionName:undefined,
          userLevel:[]
        },
        merchantCountDialog: false,
        merchantIdsView:''
      }
    },
    methods:{
      handleDelete({id}) {
        this.$confirm(`删除提现分单条件设置？`, '删除条件', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          withdrawAutoDelete({
            conditionId:id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({action: 'getGrid'});
              this.$message({
                type: 'success',
                message: `删除成功!`
              });
            } else {
              this.$message({
                type: 'error',
                message: `删除失败!${data.message}`
              });
            }
          });
        })
          .catch(() => {
          })
      },
      forTime(time){
        return new Date(time).getTime()
      },
      cancel(){
        this.filters= {
          size:20,
          page:1,
          conditionName:undefined,
          userLevel:[]
        },
          this.doGet({action:'getGrid'})
      },
      cancel2(){
        this.merchantCountDialog = false
      },
      submitFilterForm() {
        this.gridSearch()
      },
      openMerchantCountDialog(merchantIds){
        this.merchantIdsView = merchantIds
        this.doGet({ action: 'getMerchantGrid'})
        this.merchantCountDialog = true
      },
    },
    mounted() {
      this.bindGet(getUserLevelList, 'levelList', {
        action: 'getUserLevelGrid',
      })
      this.bindGet(withdrawAutoList, 'tableData', {
        action:'getGrid',
        beforeSend:(data)=>{
          return{
            ...this.filters,
            userLevel:this.filters.userLevel.length > 0 ? this.filters.userLevel.join(',') : ''
          }
        }
      });
      this.bindGet(merchantReview, 'merchantView',{
        action: 'getMerchantGrid',
        beforeSend:()=>{
          return{
            merchantIds:this.merchantIdsView
          }
        },
        format:(data)=>{
          let arr = []
          data.forEach((v,k)=>{
            accountBalance({
              merchantId:v.merchantId
            }).then((data) => {
              this.$set(v,'amount',data[0]?(data[1] == -1 ? '不支持三方账户余额查询':data[1]):0)
              arr.push(v)
            });
          })
          return arr
        }
      });
      this.doGet({ action: 'getUserLevelGrid'})
      this.doGet({ action: 'getGrid'})
    },
  }
</script>

<style lang="scss" scoped>
  /deep/ .with-pre-userLevel .el-tag{
    max-width: 105px!important;
  }
</style>
